echarts地图区域高亮时，所在区域的symbol切换图片，类似跟着区域高亮

2024-06-05 18:05| 来源: 网络整理| 查看: 265

首先看scatter散点图的数据：

data: [ { name: '广东', value: [113.280637, 23.125178, 2, 0] }, { name: '北京', value: [116.405285, 39.904989, 2, 0] } ]

上面data中的value可以存放多个值，只要保证前面两个是经纬度的值，就可以显示在相应的位置，这里还多了2和0，2主要是自定义label时要显示的数值，而最后一个0则是用来判断symbol显示的图片（0显示未高亮图片，1显示高亮图片）下面看看自定义symbol时作的判断（使用回调函数形式就可以做判断了）：

symbol: (params) => { if (params[3] == 0) { return 'image://' + require('@/assets/border1.png') } else if (params[3] == 1) { return 'image://' + require('@/assets/border.png') } },

当把鼠标放到地图的区域时，地图会高亮，同时可以在鼠标移入事件中拿到高亮区域的名称，从而可以从scatter的data数据中，找到跟高亮区域相同的名称，就可以拿到对应的value，改变value的最后一个值（由0变成1）,然后再执行setoption则可以重新渲染地图

// 鼠标划入 map.on('mouseover', (params) => { let option = map.getOption() option.series[0].data.forEach(item => { if (item.name == params.name) { item.value[3] = 1 } }) map.setOption(option, true) });

鼠标移出后再把值设置为0：

// 鼠标移出 map.on('mouseout', (params) => { let option = map.getOption() option.series[0].data.forEach(item => { if (item.name == params.name) { item.value[3] = 0 } }) map.setOption(option, true; });

以上基本可以实现地图区域高亮，symbol也高亮的效果了；但是这时候会有个bug，就是把鼠标放入地图后，地图不高亮了，那我们可以手动设置高亮，鼠标移出后再清除高亮：

// 鼠标划入 map.on('mouseover', (params) => { // 添加地图高亮 map.dispatchAction({ type: 'highlight', seriesIndex: 1, // 指定series中的map的索引 dataIndex: params.dataIndex // 高亮的区域的索引，可从回调参数params中获取 }); map.dispatchAction({ type: 'showTip', seriesIndex: 1, dataIndex: params.dataIndex }); }); // 鼠标移出 map.on('mouseout', (params) => { // 清除地图高亮 map.dispatchAction({ type: 'downplay', seriesIndex: 1, dataIndex: params.dataIndex }); });

完整代码如下：

import * as echarts from 'echarts'; import axios from 'axios' export default { data() { return { charts: null, mTime: null, index: -1, mapData: {} } }, mounted() { this.getData() }, methods: { initMap(name, data) { this.mapData = data echarts.registerMap(name, data); // 获取图片的dom元素 let map = echarts.init(document.getElementById('map')); this.charts = map let option = { geo: [ { map: name, roam: false, show: false, label: { show: false, color: '#ffffff' }, itemStyle: { areaColor: '#082332', borderColor: '#ffffff', }, zoom: 1 } ], series: [ { type: 'scatter', geoIndex: 0, coordinateSystem: 'geo', hoverAnimation: false, symbolSize: 70, symbol: (params) => { if (params[3] == 0) { return 'image://' + require('@/assets/border1.png') } else if (params[3] == 1) { return 'image://' + require('@/assets/border.png') } }, symbolOffset: ['-12%', '-50%'], // symbol: 'pin', silent: true, // 不触发鼠标悬浮 label: { show: true, formatter: (params) => { return '{a|项目数}\n{b|' + params.value[2] + '}' }, rich: { a: { color: '#ffffff', fontSize: 18 }, b: { color: '#07c2d7', fontSize: 18 } }, color: '#00e5ff', offset: [0, -7], fontSize: 26 }, data: [ { name: '广东', value: [113.280637, 23.125178, 2, 0] }, { name: '北京', value: [116.405285, 39.904989, 2, 0] } ], zlevel: 3 }, { map: name, type: 'map', roam: false, label: { show: false, color: '#ffffff' }, itemStyle: { areaColor: '#272822', borderColor: '#ffffff', }, zoom: 1 } ], animation: false } map.setOption(option) map.off('mouseover') // 防止多次点击 // 鼠标划入 map.on('mouseover', (params) => { let option = map.getOption() option.series[0].data.forEach(item => { if (item.name == params.name) { item.value[3] = 1 } }) map.setOption(option, true) // 添加地图高亮 map.dispatchAction({ type: 'highlight', seriesIndex: 1, dataIndex: params.dataIndex }); map.dispatchAction({ type: 'showTip', seriesIndex: 1, dataIndex: params.dataIndex }); }); // 鼠标移出 map.on('mouseout', (params) => { let option = map.getOption() option.series[0].data.forEach(item => { if (item.name == params.name) { item.value[3] = 0 } }) map.setOption(option, true) // 清除地图高亮 map.dispatchAction({ type: 'downplay', seriesIndex: 1, dataIndex: params.dataIndex }); }); }, mouseEvents() { }, // 获取地图json数据 getData() { axios.get('/json/china.json').then((res) => { this.$nextTick(() => { this.initMap('china', res.data) }) }) }, } }

效果图如下：在这里插入图片描述

【本文地址】

公司简介

联系我们